<script setup  lang="ts">
import {ref, reactive } from "vue"
import { useRouter } from 'vue-router'
import { linkList } from "../data/link"

const url =
  'https://agc-storage-drcn.platform.dbankcloud.cn/v0/default-bucket-rwdjv/YuaYangIntelligence%2Flogo.jpg?token=172fea34-1a1a-43bb-86c8-46eb76781afb'

  const fill = 'fill'

  const activeIndex = ref("0"); // 默认选中第一个菜单项

  const router = useRouter();

const handleSelect = (index: string) => {
  const selectedLink = linkList.value.find(
    (item) => item.id.toString() === index
  );
  if (selectedLink) {
    router.push(selectedLink.path);
  }
};
  
</script>



<template>
 <div class="nav-container">
    <el-row :gutter="24"  justify="space-between">
      <!-- Logo 部分 -->
      <el-col :span="4">
        <el-image
          style="width: 100px; height: 100px"
          :fit="fill"
          :src="url"
        >
          <template #error>
            <div class="image-slot">
              <p>LOGO</p>
            </div>
          </template>
        </el-image>
      </el-col>

      <!-- 导航菜单部分 -->
      <el-col :span="16">
        <el-menu
          :default-active="activeIndex"
          mode="horizontal"
          background-color="transparent"
          active-text-color="#409EFF"
          @select="handleSelect"
        >
          <el-menu-item
            v-for="link in linkList"
            :key="link.id"
            :index="link.id.toString()"
          >
            {{ link.name }}
          </el-menu-item>
        </el-menu>
      </el-col>

      <!-- 右侧预留空间（可放登录/注册等） -->
      <el-col :span="4">
        <div class="right-area"></div>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.nav-container {
  width: 100%;
  padding: 0 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .el-menu {
    border-bottom: none;
    display: flex;
    justify-content: center;
  }

  .el-menu-item {
    font-size: 16px;
    margin: 0 10px;
    height: 80px;
    line-height: 80px;
    border-bottom: 2px solid transparent;

    &:hover {
      background-color: transparent !important;
      border-bottom-color: var(--el-color-primary);
    }
  }

  .right-area {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
  }
}
</style>

